import React, { useState } from 'react';
import { ISysFileInfo } from '@/ts/core';
import cls from './index.module.less';
import { Button, Empty, Tag } from 'antd';
import ListMode from '@/components/Directory/views/listMode';
import { WithPath } from '@/ts/core/thing/folder';
import { DownloadOutlined } from '@ant-design/icons';
import { shareOpenLink } from '@/utils/tools';
import FileOpen from './FileOpen';

interface Props {
  initFile?: WithPath<ISysFileInfo>;
  files: WithPath<ISysFileInfo>[];
  fileType: string;
}
const FileView = ({ files, initFile, fileType }: Props) => {
  const [currentFile, setCurrentFile] = useState<WithPath<ISysFileInfo> | undefined>(
    initFile,
  );
  // function prevFile() {
  //   let f = files[0];
  //   if (currentFile) {
  //     let index = files.findIndex((file) => file.id == currentFile.id);
  //     if (index > 0) {
  //       f = files[index - 1];
  //     } else if (index == 0) {
  //       f = files[files.length - 1];
  //     }
  //   }
  //   fileOpen(f);
  // }

  // function nextFile() {
  //   let f = files[0];
  //   if (currentFile) {
  //     let index = files.findIndex((file) => file.id == currentFile.id);
  //     if (index < files.length - 1) {
  //       f = files[index + 1];
  //     } else if (index == files.length - 1) {
  //       f = files[0];
  //     }
  //   }
  //   fileOpen(f);
  // }

  function fileOpen(file: ISysFileInfo) {
    setCurrentFile(file);
  }

  return (
    <div className={cls['file-view']}>
      <div className={cls['left']} style={{ width: '400px' }}>
        <div className={cls['file-list']}>
          <ListMode
            selectFiles={[]}
            focusFile={currentFile}
            content={files}
            fileOpen={(file, _) => fileOpen(file as ISysFileInfo)}
            contextMenu={() => ({ items: [] })}
          />
        </div>
      </div>
      <div className={cls['right']}>
        {currentFile ? (
          <>
            <div className={cls['topbar']}>
              <Tag color="processing">{currentFile.directory.target.name}</Tag>
              <span className={cls['path']}>
                {/* {currentFile.filePath} */}
                {currentFile.name}
              </span>

              <div style={{ flex: 1 }}></div>

              <Button
                type="primary"
                icon={<DownloadOutlined />}
                onClick={() => {
                  const link = shareOpenLink(currentFile.filedata.shareLink, true);
                  window.open(link, '_blank');
                }}>
                下载
              </Button>
              {/* <Button shape="circle" icon={<BiLeftArrow />} 
                onClick={() => prevFile()}>
              </Button>
              <Button shape="circle" icon={<BiRightArrow />}
                onClick={() => nextFile()}>
              </Button> */}
            </div>
            <div className={cls['preview']}>
              <FileOpen
                directory={currentFile.directory}
                file={currentFile.filedata}
                type={fileType}
              />
            </div>
          </>
        ) : (
          <Empty description="选择一个文件进行预览" />
        )}
      </div>
    </div>
  );
};

export default FileView;
